<template>
  <!-- Ant Design Vue 全局配置组件，用于统一配置全局样式、国际化配置、主题、表格、单元个等 -->
  <a-config-provider
    :locale="locale"
    :theme="{
      algorithm: theme.defaultAlgorithm,
      token: {
        borderRadius: borderRadius,
      },
    }"
    :transformCellText="transformCellText"
  >
    <!---全局loading--->
    <a-spin style="z-index: 999" :spinning="loading" tip="稍等片刻，我在拼命加载中..." size="large">
      <!--- 路由 -->
      <RouterView />
    </a-spin>
  </a-config-provider>
</template>
<script setup lang="tsx">
  import { computed, ref, onMounted } from 'vue'; //computed 函数用于计算属性，ref 函数用于创建响应式数据
  import { LoadingStore } from '@/store/modules/loading'; // 导入 LoadingStore 函数，用于获取全局 loading pinia 状态管理
  import { ThemeStore } from '@/store/modules/theme-config'; // 导入 ThemeStore 函数，用于获取全局主题配置 themeConfig pinia 状态管理
  import { theme } from 'ant-design-vue'; // 从 ant-design-vue 中导入主题配置相关对象，用于设置组件库的主题
  import zhCN from 'ant-design-vue/es/locale/zh_CN'; // 从 ant-design-vue 中导入中文语言配置对象，用于 a-config-provider 的国际化配置
  import { type ColumnType } from 'ant-design-vue/es/table/interface'; //从 ant-design-vue 的表格组件接口中导入 ColumnType 类型，用于类型注解
  import EllipsisPopover from '@/components/common/popover/ellipsis-popover.vue'; //自定义的省略文本气泡提示组件，用于处理文本过长时的展示。

  import { LocalStorage } from '@/utils/utils';
  import { UserInfoStore, type UserInfo, type MenuItem } from '@/store/modules/user-info';
  import { isTokenExpired } from '@/utils/token';
  import { buildRoutes } from '@/router';
  import { isString } from 'lodash-es';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  dayjs.locale('zh-cn');

  /* 全局语言配置 */
  const locale = ref(zhCN);

  /* 全局 loading 状态 */
  const loadingStore = LoadingStore();
  const loading = computed(() => loadingStore.loading);

  /* 获取主题配置  圆角，响应式 computed 计算属性 */
  const appThemeConfigStore = ThemeStore();
  const borderRadius = computed(() => {
    return appThemeConfigStore.getBorderRadius();
  });

  /* 当table列的列宽过小，列头和列内容会重叠，菜单设置为 ellipsis（省略号） 时，无法完整展示的数据通过气泡卡片进行展示 */
  function transformCellText({ text, column }: ParametersOne<ColumnType['customRender']>) {
    if (column && column.ellipsis === true && isString(text) && !isString(column.fixed)) {
      return (
        <div style={{ width: `${column.width}px` }}>
          <EllipsisPopover placement='bottom' content={text} copy>
            {text}
          </EllipsisPopover>
        </div>
      );
    } else {
      return text;
    }
  }
  onMounted(() => {
    const token = LocalStorage.get('token') || '';
    if (isTokenExpired(token)) {
      // token 过期
    } else {
      const userInfo: UserInfo = JSON.parse(LocalStorage.get('userInfo') || '{}');
      if (userInfo) {
        const userStore = UserInfoStore();
        userStore.setUserInfo(userInfo); //将用户信息写入到 pinia 中
        buildRoutes(userInfo.menu_list as MenuItem[]); // 等待路由构建完成
      }
    }
  });
</script>
<style scoped lang="less"></style>
